<template>
<div class="prd-list clear-both">
  <div :class="{'n-card':!classChange,'card':classChange}" v-for="item in prdList" @click="lookDetail()">
      <div class="n-card-thumb">
        <img :src="IMG_ROOT+item.imageUrl" class="">
      </div>
      <div class="n-content">
            <div class="n-card-desc " >{{item.wareName}} </div>
            <div class="n-card-row">
                <span class="price" > {{item.price|tofixtwoMoney}}</span>
                <span class="float-right prd-cart iconfont iconfont-gouwuche1" @click="addCart($event,item)"></span>
            </div>
      </div>
  </div>
</div>

</template>

<script>

export default {
    props:{
        prdList:{
            type:Array,
            default:[]
          },

        classChange:{
            default:false
        }
    },
    data(){
        return {
            IMG_ROOT:window.config.IMG_ROOT
        }
    },
    methods:{
        addCart(e,item){
            e.stopPropagation();
            this.$emit('addCart',item);
        },
        lookDetail(){
            this.$emit('lookDetail');
        }
    }

}
</script>


<style scoped lang="scss">
.prd-list{
    .n-card{
        display: flex;
        color: #333;
        height: 2.666667rem;
        font-size: .426667rem;
        background: #fff;
        position: relative;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: .133333rem .266667rem .133333rem 3.266667rem;
        border-bottom:.013333rem solid #ececec;
        .n-card-thumb{
            display: flex;
            top: .133333rem;
            left: .4rem;
            width: 2.5rem;
            height: 2.5rem;
            position: absolute;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            img{
                border: none;
                max-width: 100%;
                max-height: 100%;
            }
        }
        .n-content{
            width:100%;
            position:relative;
            padding:.133333rem 0;
            .n-card-desc{
                font-size:.373333rem;
                max-height: 1.066667rem;
                line-height:.533333rem;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .n-card-row{
                width:100%;
                position:absolute;
                bottom:.133333rem;

            }
        }
    }

    .card{
        width:50%;
        height:6.266667rem;
        float:left;
        padding:.266667rem .266667rem .4rem .266667rem ;
        margin-bottom:.08rem;
        box-sizing:border-box;
        border:.013333rem solid #ececec;
        background: #fff;
        .n-card-thumb{
            width:100%;
            height:3.466667rem;
            display: flex;
            img{
                display:block;
                border: none;
                max-width:100%;
                max-height:100%;
                margin:auto;
            }
        }
        .n-content{
            margin-top:.266667rem;
            padding:0 .266667rem ;
            .n-card-desc{
                font-size:.373333rem;
                max-height: 1.066667rem;
                line-height:.533333rem;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .n-card-row{
                margin-top:.266667rem;
            }
        }
    }
}


.price{
    font-size:.426667rem;
    color:#e4393c;
    width: 80%;
    display: inline-block;
}
.prd-cart{
    font-size:.5rem;
    font-weight:bold;
    color:#e4393c;
    margin-right:.266667rem;
}
</style>
